<template>
    <page-view>

        <el-card>
            <template #header>
                <div class="font-bold">菜品列表</div>
            </template>
            <el-form :model="queryFormData" :inline="true">
                <el-form-item label="时间">
                    <template #default="{ row }">
                        <div class="demo-date-picker">
                            <div class="block">
                                <el-date-picker v-model="queryFormData.submit_time" type="daterange"
                                    start-placeholder="开始日期" end-placeholder="结束日期" :default-time="defaultTime" />
                            </div>
                        </div>
                    </template>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-input placeholder="请输入订单状态" v-model="queryFormData.order_status" />
                </el-form-item>
                <el-form-item label="用户ID">
                    <el-input placeholder="请输入用户ID" v-model="queryFormData.uid" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="queryData" :loading="isLoading">
                        <el-icon>
                            <Search />
                        </el-icon>
                        查询
                    </el-button>
                </el-form-item>
            </el-form>

            <!-- 数据展示 -->
            <div v-loading="isLoading">
                <el-table :data="resultData.listData" border stripe height="800" width="800">
                    <el-table-column label="" prop="" align="center">
                        <el-table-column type="expand">
                            <template #default="{ row }">
                                <el-descriptions title="用户信息" :column="3" border>
                                    <el-descriptions-item label="用户昵称">
                                        {{ row.userInfo.nickName }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="性别">
                                        {{ row.userInfo.user_sex }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="手机号">
                                        {{ row.userInfo.user_phone }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="邮箱">
                                        {{ row.userInfo.user_email }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="本次收货地址">
                                        {{ row.addressInfo.address }}
                                    </el-descriptions-item>
                                </el-descriptions>
                                <el-descriptions title="订单详细信息" :column="row.orderDetailList.length" border>
                                    <template v-for="item in row.orderDetailList">

                                        <el-descriptions-item label="菜品名称">
                                            {{ item.foodInfo.food_name }}
                                        </el-descriptions-item>
                                        <el-descriptions-item label="单价">
                                            {{ item.foodInfo.price }}
                                        </el-descriptions-item>
                                    </template>

                                </el-descriptions>

                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="ID" prop="id" width="70" align="center"></el-table-column>
                    <el-table-column label="用户编号" prop="uid" align="center"></el-table-column>
                    <el-table-column label="订单生成时间" prop="submit_time" align="center">
                        <template #default="{ row }">
                            <span>{{ formatDateTime(row.submit_time) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单总金额" prop="order_money" align="center"></el-table-column>
                    <el-table-column label="菜品总数" prop="orderDetailList.length" align="center"></el-table-column>
                    <el-table-column label="订单状态" prop="order_status" align="center"></el-table-column>
                    <el-table-column label="付款时间" prop="pay_time" align="center">
                        <template #default="{ row }">
                            <span>{{ formatDateTime(row.pay_time) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="发货时间" prop="deliver_time" align="center">
                        <template #default="{ row }">
                            <span>{{ formatDateTime(row.deliver_time) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="发货地址" prop="addressInfo.address" align="center" width="400">
                    </el-table-column>

                    <el-table-column label="操作" align="center" fixed="right">
                        <template #default="{ row }">
                            <el-button type="success" @click="send({ id: row.id, order_status: row.order_status })"
                                :loading="isLoading">
                                发货
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <!-- 页码 -->

                <div class="flex flex-row justify-between items-center mt-10">

                    <div>当前{{ queryFormData.pageIndex }}页，
                        共{{ resultData.pageCount }}页，共{{ resultData.totalCount }}条
                    </div>
                    <el-pagination background layout="prev,pager,next" :total="resultData.totalCount"
                        @current-change="currentChange"></el-pagination>
                </div>
            </div>

        </el-card>
    </page-view>

</template>


<script setup>
import { reactive, inject, ref } from "vue";
import { Search } from "@element-plus/icons-vue"
import API from "../../utils/API";
import { onMounted, } from "vue";
import { formatDateTime } from "../../utils/DateTimeUtils";
import { ElNotification } from "element-plus";
const baseURL = inject("baseURL");
const queryFormData = reactive({

    pageIndex: 1,

    start_time: "",
    end_time: "",
    order_status: "",
    uid: ""
})
const isLoading = ref(false);
const resultData = reactive({
    listData: [],
    pageCount: 0,
    totalCount: 0

});

const value = ref('');
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0) // '12:00:00'

const queryData = () => {
    isLoading.value = true;
    API.orderInfo.getListByPage(queryFormData).then(result => {
        console.log(result);
        resultData.listData = result.listData;
        resultData.pageCount = result.pageCount;
        resultData.totalCount = result.totalCount;

    }).finally(() => {
        isLoading.value = false
    })
}
//页码发生变化
const currentChange = (index) => {
    queryFormData.pageIndex = index;
    queryData();
}

const send = (obj) => {
    if (obj.order_status === "已付款") {
        console.log(obj.order_status);
        API.orderInfo.updateOrderToDeliver(obj.id);
    }
    else if (obj.order_status === "未付款") {
        ElNotification({
            type: "danger",
            title: "当前未付款",
            message: "请先付款"
        });
    }
    else {
        ElNotification({
            type: "danger",
            title: "当前已发货",
            message: "不能重复发货"
        });
    }
}
onMounted(() => {
    queryData()
})
</script>


<style>

</style>